<template>
    <div class="ip-input" v-model="currentValue">
        <at-input v-model.number.trim="currentValue[0]" :placeholder="placeholder"></at-input>
        .
        <at-input v-model.number.trim="currentValue[1]" :placeholder="placeholder"></at-input>
        . 
        <at-input v-model.number.trim="currentValue[2]" :placeholder="placeholder"></at-input>
        . 
        <at-input v-model.number.trim="currentValue[3]" :placeholder="placeholder"></at-input>
    </div>  
</template>
<script>
/**
 *@author 金迎迎
 */
export default {
    /**
        *@description：设置组件的名字 ip-input
        */ 
    name:"ip-input",
    
    props:{
         /**
            *@type {Array }:value 数组类型
            */ 
        value:{
            required: true
        },
        /**
            *@type {String}:placeholder 提示信息
            */
        placeholder:{
            type:String,
            default:""
        }
        
    },
    /**
        * @return {String} currentValue:接收返回的value值（数组的形式），如果没有，设置为空
        */
    computed:{
        currentValue(){
            return this.value || []
        }
    },
    /**
        *@param{String,String} oldValue,newValue：监听input中的值，旧值被新值覆盖
        */
    watch:{
        currentValue(newValue,oldValue){
            this.$emit('input', newValue)
            let changeFlag=false;
            for(let i of newValue){
                if(typeof i!=='undefined'&&i!=null&&i!=''){
                    changeFlag=true;
                }
            }
            if(changeFlag){
                this.$emit('change',newValue)
            }
        
        } 
    }  
}
</script>
